#snake {
   
    position: relative;
    padding: 10px;
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    overflow: hidden;
    background-color: transparent;
    box-shadow:  0 0 0, 0 0 0,0 0 0  ;
    transition: box-shadow 2s, background 2s,color 2s;
    
}
#snake  {
  color:black!important;
}


 
  #snake:hover {
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 25px #03e9f4,
                0 0 25px #03e9f4;
   
   
}

/*  color set up  */

#snake:hover { 
    color: #050001;
    background: #03e9f4;

}

#snake {
    color: white;
}





/*new path*/



/*------------------*/
/*------------------*/
/* top flash line-(start) ---- CHILD-01--- */

/*------------------*/
/*------------------*/




  #snake span {
    position: absolute;
    display: block;

}

  #snake span:nth-child(1) {
    top:0;
    left:  -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;   
         
}

@keyframes animate1 
{
    0%
    {
        left: -100%;
    }
    
    50%,100%
    {
        left: 100%;
    }
    
   
}



/* top flash line-(end) */



/*------------------*/
/*------------------*/
/* bottom flash line-(start) ---- CHILD-03--- */

/*------------------*/
/*------------------*/



  #snake span {
    position: absolute;
    display: block;

}

  #snake span:nth-child(3) {
    bottom:0;
    right:  -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
      animation: animate3 1s linear infinite;
      animation-delay: .5s;
    
}
@keyframes animate3 
{
    0%
    {
        right: -100%;
    }
    
    50%,100%
    {
        right: 100%;
    }
    
   
}



/* bottom flash line-(end)  */



/*------------------*/
/*------------------*/
/* right  flash line-(start) ---- CHILD-02--- */
/*------------------*/
/*------------------*/


  #snake span {
    position: absolute;
    display: block;

}

  #snake span:nth-child(2) {
    top:-100%;
    right:  0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
      animation-delay: .25s;
}

@keyframes animate2 
{
    0%
    {
        top: -100%;
    }
    
    50%,100%
    {
        top: 100%;
    }
    
   
}



/* right flash line-(end)  */



/*------------------*/
/*------------------*/
/* left flash line-(start) ---- CHILD-04--- */
/*------------------*/
/*------------------*/



  #snake span {
    position: absolute;
    display: block;

}

  #snake span:nth-child(4) {
    left:0;
    bottom:  -100%;
    width: 2px ;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
      animation: animate4 1s linear infinite;
      animation-delay: .75s;
    
}

@keyframes animate4  
{
    0%
    {
        bottom: -100%;
    }
    
    50%,100%
    {
        bottom: 100%;
    }
    
   
}



/* left flash line-(end)  */